<!-- pages/test/index.vue -->
<script setup>
  // import { http } from '@/utils/http.js';
  // 导入定义的Store
  import { ref } from 'vue'
  import { useCounterStore } from '@/stores/counter.js'
  //
  const store = useCounterStore()

  // async function onButtonClick() {
  //   // 1. 普通用法
  //   const res = http.request({
  //     url: '/echo',
  //     method: 'GET'
  //   });
  //   console.log(res);
  // }

  const paymentRef = ref()
  // 关闭弹层
  function testClose() {
    paymentRef.value.closePopup()
  }
</script>
<template>
  <view class="content">
    <!-- <button @click="onButtonClick" type="primary">luch-request 测试</button> -->
    <view>{{ store.name }}-{{ store.double }}</view>
    <view class="counter">
      <button class="button" type="primary" @click="store.decrement()">
        -
      </button>
      <input class="input" type="text" :value="store.count" />
      <button class="button" type="primary" @click="store.increment()">
        +
      </button>
      <button @click="paymentRef.openPopup()">测试</button>
      <custom-payment
        amount="39.9"
        @close="testClose"
        ref="paymentRef"
      ></custom-payment>
    </view>
  </view>
</template>
<style lang="scss">
  .counter {
    display: flex;
    margin-top: 30rpx;
  }

  .input {
    flex: 1;
    height: 96rpx;
    text-align: center;
    border: 2rpx solid #eee;
    box-sizing: border-box;
  }

  .button {
    width: 100rpx;
    margin: 0;

    &:first-child {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    &:last-child {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
</style>
